<template>
  <el-row class="article-item">
    <el-col :span="24" class="title" @click.native="goDetail">123</el-col>
    <el-col :span="24" class="tools">
      <div>
        <i class="el-icon-date"></i>&nbsp;2020-04-14
      </div>
      <div>
        <i class="el-icon-folder-opened"></i>&nbsp;分类
      </div>
      <div class="fire">
        <i class="el-icon-bicycle"></i>&nbsp;13456人
      </div>
    </el-col>
    <el-col class="introduction">
      <p>你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，</p>
    </el-col>
    <el-col class="more" @click.native="goDetail">
      <i class="el-icon-document-remove"></i>&nbsp;查看原文
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    article: {
      tpye: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    goDetail() {
      this.$router.push("/detail/1231321");
    },
  },
};
</script>

<style scoped>
.article-item {
  padding: 2rem 0;
  border-top: 1px solid #ccc;
  font-size: 0.75rem;
}
.more {
  color: #1890ff;
  text-align: right;
  padding-right: 2rem;
  cursor: pointer;
  margin-top: 1rem;
}
.title {
  text-indent: 1rem;
  color: #1890ff;
  font-size: 2rem;
  cursor: pointer;
}
.tools {
  display: flex;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #ccc;
}
.tools > div {
  margin: 0 10px;
}
.introduction {
  font-size: 0.875rem;
  text-indent: 2rem;
  color: #999;
  line-height: 1.5rem;
}
.fire {
  color: #f0732e;
}
</style>